<template>
  <div class="person-social-info-container">
    <van-nav-bar
      style="background-color: #fff;"
      title="个人参保信息"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <header-card :myProp="myProp"></header-card>
    <div class="main-box">
      <div class="person-info-box">
        <div class="info-list">
          <div class="list-left">
            姓名：
          </div>
          <div class="list-right">
            刘晓红
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            身份证号：
          </div>
          <div class="list-right">
            440223198605302235
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            社会保障卡号：
          </div>
          <div class="list-right">
            440223198605302235
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            社保个人编号：
          </div>
          <div class="list-right">
            E2585875544145
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            性别：
          </div>
          <div class="list-right">
            女
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            出生日期：
          </div>
          <div class="list-right">
            1986-05-30
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            单位名称：
          </div>
          <div class="list-right">
            广东德生科技股份有限公司
          </div>
        </div>
        <div class="info-list">
          <div class="list-left">
            参保状态：
          </div>
          <div class="list-right social-text">
            正常参保
          </div>
        </div>
        <div class="btn-box">
          <van-button type="info" style="width: 100%;" size="small" @click="$router.go(-1)">返 回</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderCard from '@/components/headerCard.vue'
export default {
  name: 'salaryRecordSearch',
  components: {
    'header-card': HeaderCard
  },
  data () {
    return {
      show: false,
      username: '',
      phone: '',
      sms: '',
      recordArrow: 'arrow-down',
      currentDate: new Date(),
      myProp: {
        username: '刘*红',
        idNum: '440223********2235',
        isIndex: false
      }
    }
  },
  created () {
  },
  methods: {
    // 前往个人参保信息页面
    toPesonSocialInfoPage () {
      this.$router.push('/personSocialInfo')
    },
    onConfirm (value, index) {
      console.log(value, index)
      this.show = false
      this.recordYear = value
      this.recordArrow = 'arrow-down'
    },
    // 切换年份
    changeYear () {
      this.recordArrow = 'arrow-up'
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
.person-social-info-container{
  font-size: 14px;
  min-height: 100vh;
  background-color: #f8f8f8;
  .main-box{
    position: relative;
    background-color: #f8f8f8;
    .person-info-box{
      width: 88%;
      margin: 0 3.5%;
      border-radius: 5px;
      position: relative;
      top: -60px;
      padding: 10px;
      background-color: #fff;
      .info-list{
        display: flex;
        position: relative;
        height: 46px;
        padding: 0 5px;
        line-height: 46px;
        background-color: #fff;
        .list-left{
          flex: 40%;
        }
        .list-right{
          color: @lightColor;
          text-align: right;
          flex: 60%;
        }
        .social-text{
          color: @deepColor;
        }
      }
    }
    .btn-box{
      position: absolute;
      bottom: -60px;
      width: 100%;
      margin: 0 -3.8%;
    }
  }
  .empty-box{
    height: 30px;
    width: 100%;
    background-color: transparent;
  }
}
</style>
